
<template>
    <div class="profile-container">
      <!-- 头像区 -->
      <div class="profile-header">
        <img :src="user.avatar" class="avatar" />
        <h2>{{ user.name }}</h2>
        <p>{{ user.title }} | {{ user.location }}</p>
      </div>
  
      <!-- 信息卡片 -->
      <div class="card" v-for="(section, index) in sections" :key="index">
        <h3>{{ section.title }}</h3>
        <div v-for="(item, i) in section.items" :key="i" class="info-item">
          <span class="label">{{ item.label }}：</span>
          <span class="value">{{ item.value }}</span>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        user: {
        //   avatar: require('@/assets/avatar.jpg'),
          name: '张三',
          title: '高级UI设计师',
          location: '北京'
        },
        sections: [
          {
            title: '基本信息',
            items: [
              { label: '性别', value: '男' },
              { label: '年龄', value: '28' },
              { label: '生日', value: '1997-05-15' }
            ]
          },
          {
            title: '联系方式',
            items: [
              { label: '手机', value: '138****1234' },
              { label: '邮箱', value: 'zhangsan@example.com' }
            ]
          }
        ]
      }
    }
  }
  </script>
  
  <style scoped>
  .profile-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
  .profile-header {
    text-align: center;
    margin-bottom: 30px;
  }
  .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #f0f0f0;
  }
  .card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  }
  .info-item {
    margin: 10px 0;
  }
  .label {
    font-weight: bold;
    color: #666;
  }
  h2, h3 {
    color: #333;
    margin: 10px 0;
  }
  </style>
  